<script setup>
import { ref, onMounted } from "vue";

defineProps({
  msg: String,
});

const isRunning = ref(false);
const items = ref([]);
const newItem = ref("");
const num = ref(2);
const salary = ref(25);
const text = ref(`你好，对这个职位感兴趣，我叫师启明，这个是我的个人微博作品：https://shiqiming.cn
其他作品：
3D可视化：https://shiqiming.cn/three
2D标注平台：https://shiqiming.cn/biaozhu
boss直聘自动投递浏览器插件：https://gitee.com/shiqiming1/chrome-boss
这个是我的简历（复制到浏览器地址就可以下载）：
https://shiqiming.cn/download/前端工程师-师启明.pdf`);

console.log("helloword 组件被创建");
chrome.storage.local.set({ text: text.value });

const numChange = (val) => {
  // 处理 num 变化的逻辑
  chrome.storage.local.set({ deliverMaxNum: val });
};
const textChange = (val) => {
  chrome.storage.local.set({ text: val });
};
const salaryChange = (val) => {
  chrome.storage.local.set({ salary: val });
};

const handleStatus = () => {
  isRunning.value = !isRunning.value;
  const messageType = "status";
  chrome.storage.local.set({ isRunning: isRunning.value });
  chrome.runtime.sendMessage({ type: messageType, isRunning: isRunning.value }, (response) => {
    console.log("收到 background.js 的回复:", response);
  });
};

const addItem = () => {
  if (newItem.value.trim() !== "") {
    items.value.push(newItem.value.trim());
    newItem.value = "";
    chrome.storage.local.set({ filterCompany: [...items.value] });
  }
};

const removeItem = (index) => {
  items.value.splice(index, 1);
  chrome.storage.local.set({ filterCompany: [...items.value] });
};

onMounted(() => {
  // 初始化时加载状态
  chrome.storage.onChanged.addListener((changes) => {
    if (changes.isRunning && changes.isRunning.newValue === false) {
      isRunning.value = false;
    }
  });

  chrome.storage.local.get(["isRunning"], (result) => {
    if (result.isRunning !== undefined) {
      isRunning.value = result.isRunning;
    }
  });

  chrome.storage.local.get(["filterCompany"], (result) => {
    if (result.filterCompany !== undefined) {
      var initItems = result.filterCompany;
      items.value = initItems || [];
    }
  });
  chrome.storage.local.get(["deliverMaxNum"], (result) => {
    if (result.deliverMaxNum !== undefined) {
      num.value = result.deliverMaxNum;
    }
  });
  chrome.storage.local.get(["salary"], (result) => {
    if (result.salary !== undefined) {
      salary.value = result.salary;
    }
  });
  chrome.storage.local.get(["text"], (result) => {
    if (result.text !== undefined) {
      text.value = result.text;
    }
  });
});
</script>

<template>
  <div>
    <button type="button" @click="handleStatus">{{ isRunning ? "停止" : "投简历" }}</button>
    <div style="display: flex; align-items: center">
      <span>投递数量</span>
      <input type="number" v-model.number="num" @input="numChange($event.target.value)" placeholder="投递数量" />
    </div>
    <div style="display: flex; align-items: center">
      <span>最高薪资小于多少不投</span>
      <input type="number" v-model.number="salary" @input="salaryChange($event.target.value)" placeholder="单位K" />
    </div>
    <div style="display: flex; align-items: center">
      <span>投递模板</span>
      <textarea
        type="text"
        style="flex: 1; min-height: 100px"
        v-model.trim="text"
        @input="textChange($event.target.value)"
        placeholder="投递模板"
      />
    </div>
    <div style="display: flex; align-items: center">
      <input style="flex: 1" v-model="newItem" placeholder="过滤不需要投递公司的名称" />
      <button @click="addItem">添加</button>
    </div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<style scoped></style>
